<template>
  <div class="container">
    <!-- 面包屑 -->
    <XtxBread>
      <XtxBreadItem to="/">首页</XtxBreadItem>
      <XtxBreadItem :to="'/category/' + categoryItem.id1">{{
        categoryItem.name1
      }}</XtxBreadItem>
      <transition name="fadeBread" mode="out-in">
        <XtxBreadItem :key="categoryItem.id2">{{
          categoryItem.name2
        }}</XtxBreadItem>
      </transition>
    </XtxBread>
    <br />
    <!-- <XtxCheckbox :modelValue="bol" @update:modelValue="bol = $event"
      >测试多选框</XtxCheckbox
    >
    vue2:
      父传子
         子组件 :value="fatherValue"
         子组件内：
            props:['value']
      子传父
        子组件  @input="fatherValue=$event"
        子组件内：
           model:{
             prop:'value',
             event:'input'
           }
           this.$emit('input',值)
      父组内上   子组件  v-model="fatherValue"

      vue3:
        父传子
          子组件标签  :modelValue="fatherValue"
          子组件内：
          props:['modelValue']

        子传父
          子组件标签  @update:modelValue="fatherValue=$event"
          子组件内：
            setup(props,{emit}){
              emit('update:modelValue',值)
            }

        父组件内：  子组件标签  v-model:modelValue="fatherValue"
        当父传子属性为modelValue时，它是可以省的，一个组件上可以使用多个v-model:属性名=“值”

    -->
    <!-- <XtxCheckbox v-model="bol">测试多选框</XtxCheckbox> -->
    <SubFilter @change="filterChang"></SubFilter>
  </div>
</template>
<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import SubFilter from './components/sub-filter.vue'
export default {
  components: {
    SubFilter
  },

  setup () {
    function filterChang (prop) {
      console.log(('改变值', prop))
    }
    // onBeforeMount(() => {
    //   console.log('onBeforeMount:二级类目')
    // })
    // onMounted(() => {
    //   console.log('onMounted:二级类目')
    // })
    /*
    处理面包屑数据
    已知:分类列表[{id,name,children:[{id2,name2}]}}]
    */
    const store = useStore()
    const route = useRoute()
    const categoryItem = computed(() => {
      let _obj = { id1: '', name1: '', id2: '', name2: '' }
      store.state.category.list.forEach(item => {
        if (item.children) {
          item.children.forEach(item2 => {
            if (item2.id === route.params.id) {
              _obj = {
                id1: item.id,
                name1: item.name,
                id2: item2.id,
                name2: item2.name
              }
            }
          })
        }
      })
      return _obj
    })
    // 多选框测试
    const bol = ref(true)
    return { categoryItem, bol, filterChang }
  }
}
</script>
<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>
